<template>
<!-- 推荐 -->
	<div id="recommend">
		<!-- 推荐新闻内容 -->
		<div class="recommend-content">
			<div class="recommend-l">
				<!--收藏点赞点击弹框-->
		        <CompIcon :iconStyle="iconStyle" v-if="compIconShow" :compIconContent="compIconContent"/> 
				<div class="recommend-prompt">
					<small><b></b><i></i></small>
					<span>以下信息根据您的兴趣推荐</span>
					<small><i></i><b></b></small>
				</div>
				<div class="recommendL-content">
					<div class="recommendL-details" v-for="(item, index) in recContent" :key="index" v-if="index < comNum">
						<NavListDetComp :detailContent="item" @popContent="popContent"/>
					</div>
					<!-- 新闻列表条 -->
					<!--<div class="recommend-list">
						<div class="recommend-list-l">
							<img src="../../../assets/test3.jpg" alt="">
						</div>
						<div class="recommend-list-r">
							<div class="recommendList-title">
								<span>从商标设计到好设计的标,准从商标设到从商标 NLU我们的家</span>
							</div>
							<div class="recommendList-content">
								<span>费电话费放奶厄尔富 恩爱让人《认识绝地求生：大逃杀》新一轮测试服的测中，对玩家游戏的UI界面做出完人仍然是人 认识认识人美的新…</span>
							</div>
							<div class="content-r-footer">
								<div class="content-r-footer-l">
									<span class="footer-type">
										<span>新闻</span>
									</span>
									<span class="footer-mold">爆炸案</span>
									<span class="footer-time">11-23 08:46</span>
								</div>
								<div class="content-r-footer-r">
									<i></i>
									<i></i>
									<i></i>
									<i></i>
								</div>
							</div>
						</div>
					</div>
					<div class="recommend-list">
						<div class="recommend-list-l">
							<img src="../../../assets/test3.jpg" alt="">
						</div>
						<div class="recommend-list-r">
							<div class="recommendList-title">
								<span>从商标设计到好设计的标,准从商标设到从商标 NLU我们的家</span>
							</div>
							<div class="recommendList-content">
								<span>费电话费放奶厄尔富 恩爱让人《认识绝地求生：大逃杀》新一轮测试服的测中，对玩家游戏的UI界面做出完人仍然是人 认识认识人美的新…</span>
							</div>
							<div class="content-r-footer">
								<div class="content-r-footer-l">
									<span class="footer-type">
										<span>新闻</span>
									</span>
									<span class="footer-mold">爆炸案</span>
									<span class="footer-time">11-23 08:46</span>
								</div>
								<div class="content-r-footer-r">
									<i></i>
									<i></i>
									<i></i>
									<i></i>
								</div>
							</div>
						</div>
					</div>
					<div class="recommend-list">
						<div class="recommend-list-l">
							<img src="../../../assets/test3.jpg" alt="">
						</div>
						<div class="recommend-list-r">
							<div class="recommendList-title">
								<span>从商标设计到好设计的标,准从商标设到从商标 NLU我们的家</span>
							</div>
							<div class="recommendList-content">
								<span>费电话费放奶厄尔富 恩爱让人《认识绝地求生：大逃杀》新一轮测试服的测中，对玩家游戏的UI界面做出完人仍然是人 认识认识人美的新…</span>
							</div>
							<div class="content-r-footer">
								<div class="content-r-footer-l">
									<span class="footer-type">
										<span>新闻</span>
									</span>
									<span class="footer-mold">爆炸案</span>
									<span class="footer-time">11-23 08:46</span>
								</div>
								<div class="content-r-footer-r">
									<i></i>
									<i></i>
									<i></i>
									<i></i>
								</div>
							</div>
						</div>
					</div>
					--><!-- 新闻列表小图 -->
					<!--<div class="recommend-list-img">
						<div class="recommend-img-title">
							<span>宣布鲁炜落马同一天 中纪委还发出另一个强烈信号</span>
						</div>
						<div class="recommend-img-content">
							<img src="../../../assets/test1.jpg" alt="">
							<img src="../../../assets/test2.jpg" alt="">
							<img src="../../../assets/test3.jpg" alt="">
						</div>
						<div class="content-r-footer">
							<div class="content-r-footer-l">
								<span class="footer-type">
									<span>新闻</span>
								</span>
								<span class="footer-mold">爆炸案</span>
								<span class="footer-time">11-23 08:46</span>
							</div>
							<div class="content-r-footer-r">
								<i></i>
								<i></i>
								<i></i>
								<i></i>
							</div>
						</div>
					</div>
					--><!-- 新闻列表大图 -->					
					<!--<div class="recommend-list-adv">
						<div class="recommend-adv-title">
							<span>北京现在致敬中国十大工程</span>
						</div>
						<div class="recommend-adv-banner">
							<img src="../../../assets/test1.jpg" alt="">
						</div>
						<div class="content-r-footer">
							<div class="content-r-footer-l">
								<span class="footer-type">
									<span>新闻</span>
								</span>
							</div>
						</div>
					</div>
					<div class="recommend-list">
						<div class="recommend-list-l">
							<img src="../../../assets/test3.jpg" alt="">
						</div>
						<div class="recommend-list-r">
							<div class="recommendList-title">
								<span>从商标设计到好设计的标,准从商标设到从商标 NLU我们的家</span>
							</div>
							<div class="recommendList-content">
								<span>费电话费放奶厄尔富 恩爱让人《认识绝地求生：大逃杀》新一轮测试服的测中，对玩家游戏的UI界面做出完人仍然是人 认识认识人美的新…</span>
							</div>
							<div class="content-r-footer">
								<div class="content-r-footer-l">
									<span class="footer-type">
										<span>新闻</span>
									</span>
									<span class="footer-mold">爆炸案</span>
									<span class="footer-time">11-23 08:46</span>
								</div>
								<div class="content-r-footer-r">
									<i></i>
									<i></i>
									<i></i>
									<i></i>
								</div>
							</div>
						</div>
					</div>
					<div class="recommend-list">
						<div class="recommend-list-l">
							<img src="../../../assets/test3.jpg" alt="">
						</div>
						<div class="recommend-list-r">
							<div class="recommendList-title">
								<span>从商标设计到好设计的标,准从商标设到从商标 NLU我们的家</span>
							</div>
							<div class="recommendList-content">
								<span>费电话费放奶厄尔富 恩爱让人《认识绝地求生：大逃杀》新一轮测试服的测中，对玩家游戏的UI界面做出完人仍然是人 认识认识人美的新…</span>
							</div>
							<div class="content-r-footer">
								<div class="content-r-footer-l">
									<span class="footer-type">
										<span>新闻</span>
									</span>
									<span class="footer-mold">爆炸案</span>
									<span class="footer-time">11-23 08:46</span>
								</div>
								<div class="content-r-footer-r">
									<i></i>
									<i></i>
									<i></i>
									<i></i>
								</div>
							</div>
						</div>
					</div>
				-->
				</div>
				<div class="list-more">
					<h3 @click="listMore">点击加载更多<i></i></h3>
				</div>
			</div>
			<!-- 热点组件 -->
			<div class="recommend-r">
				<hotspot></hotspot>
			</div>
		</div>
	</div>
</template>

<script>
// 头部组件引入
  import Hotspot from '@/components/hotspot'
  import NavListDetComp from '@/components/navDetails/navListDetComp'
  // 子路由中点赞和收藏组件
  import CompIcon from '@/components/public/compIcon'
  export default {
//  组件使用
    components: {
      'hotspot': Hotspot,
      NavListDetComp,
      CompIcon
    },
    data () {
      return {
      	recContent: [], // list内容
        comNum: 20, // 内容条数
        iconStyle: { // 收藏点赞点击弹框位置
			'marginTop':'-100px',
			'marginLeft': '260px'
		},
		compIconContent: '', // CompIcon的内容
		compIconShow: false // compIcon是否显示
      }
    },
    created () {
      this.$http.get('../../../../static/json/navListDetail.json')
      .then(res => {
        var data = res.data.data
        for (var i = 0 , l = data.length ; i < l ; i++) {
			var contentLength = data[i].content.length
			if (contentLength > 60) {
				data[i].content = data[i].content.substring(0,61)+"..."
			}
		}
        this.recContent = data
      })
      .catch(error => {
        console.log(error)
      })
    },
    methods: {
      listMore () {
    	this.comNum += 20	
      },
      // 从contribution子组件传来的参数，用来处理
  		popContent (value) {
  			var that = this
  			that.compIconContent = value
  			that.compIconShow = true
  			setTimeout (function () {
  				that.compIconShow = false
  			},3000)
  		}
    }
  }
</script>

<style>
  @import '../../../../static/index/recommend.css'
</style>